﻿@model IEnumerable<Weapsy.Reporting.Menus.MenuItemAdminListModel>

@{
    ViewBag.Title = "Menu";
}

@section scripts{
    <script src="~/lib/nestedSortable/jquery.mjs.nestedSortable.js"></script>  
    <script src="~/js/admin/menus/index.js"></script>
}

<div style="display: none;" data-bind="visible: true">

    <div class="page-header">
        <h1>Main Menu</h1>
    </div>

    @*<ol id="menuItems" class="list-group sortable">
        @foreach (var menuItem in Model)
        {
            @await Html.PartialAsync("_MenuItem.cshtml", menuItem)
        }
    </ol>*@

    <ol id="menuItems" data-bind="template: { name: 'menuItem-template', foreach: menuItems }" class="list-group sortable"></ol>

    <script id="menuItem-template" type="text/html">
        <li data-bind="attr: { id: id, parentId: parentId }">
            <div class="list-group-item">
                <span class="glyphicon glyphicon-option-vertical handle" aria-hidden="true"></span>
                <span data-bind="text: text"></span>
                <a href="#" class="glyphicon glyphicon-remove options" title="Delete" data-bind="click: confirmMenuItemToDelete" data-toggle="modal" data-target="#confirm-delete"></a>
                <a href="#" class="glyphicon glyphicon-edit options" title="Edit" data-bind="attr: { href: editUrl }"></a>
            </div>
            <ol data-bind="template: { name: 'menuItem-template', foreach: menuItems }"></ol>
        </li>
    </script>

    <div>
        <a href="@Url.Action("Item", "Menu", new { area = "Admin" })" class="btn btn-primary" title="New Menu Item">New Menu Item</a>
        <a id="confirmReorder" href="#" class="btn btn-primary" title="Update Order">Update Order</a>
    </div>

    <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="deleteModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteModal">Confirm Delete</h4>
                </div>
                <div class="modal-body" data-bind="text: confirmDeleteMenuItemMessage">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-danger btn-ok" data-dismiss="modal" data-bind="click: deleteMenuItem">Delete</a>
                </div>
            </div>
        </div>
    </div>
    
    <div style="font-style: italic; margin-top: 20px;">
        Multi menu management will be available in one of the next releases.
    </div>

</div>
